<template>
  <div class="device-select">
    <div class="select">
      <a-popover placement="bottomLeft">
        <template slot="content">
          <div>
            <a-table
              :row-key="(record) => record.path"
              :columns="columns"
              :pagination="false"
              :data-source="tableData"
            >
              <div
                slot="mac"
                slot-scope="text, record"
                style="display: flex; align-items: center"
              >
                {{ record.usedPercent.toFixed(2) }}%
                <span class="item-tip">
                  &nbsp; ({{ dealTotalDisk(record.total) }}G)</span
                >
              </div>
            </a-table>
          </div>
        </template>
        <div><icon-font type="ic-xinxi-mianxing1" class="down" /></div>
      </a-popover>
    </div>
  </div>
</template>
<script>
import { requestHttp, maccApi } from '@utils/index';
import _ from 'lodash';

export default {
  name: 'RJDeviceSelect', //设备选择器
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    groupId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    const columns = [
      {
        title: this.$t('privateSys.disk1'),
        dataIndex: 'path',
        key: 'path',
        align: 'left',
        width: 150,
      },
      {
        title: this.$t('privateSys.used'),
        dataIndex: 'usedPercent',
        key: 'usedPercent',
        align: 'left',
        scopedSlots: { customRender: 'mac' },
        width: 200,
      },
    ];
    return {
      loading: false,
      pagination: {
        totalCount: 0,
        page: 1,
        pageSize: 10,
      },
      columns,
    };
  },
  watch: {},
  mounted() {},
  methods: {
    pageChange(page, pageSize) {
      this.pagination.page = page;
      this.pagination.pageSize = pageSize;
    },
    dealTotalDisk(val) {
      let total = (val / 1000 / 1000 / 1000).toFixed(2);
      return total;
    },
  },
};
</script>
<style lang="less" scoped>
.device-select {
  display: inline-block;
  .down {
    color: @gray-1;
    font-size: 14px;
  }
}
.pagination {
  text-align: right;
  margin-top: 8px;
}
</style>
